<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: august_Ld
  Date: 2022/5/13
  Time: 14:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>


<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <base href="<%=basePath%>">
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>

<div class="container">
    <h1 style="text-align: center;height: 300px;line-height: 300px">用户管理系统</h1>
    <%--    <div class="row" >--%>
    <%--        <div class="col-md-3" >--%>
    <%--            --%>
    <%--        </div>--%>
    <%--    </div>--%>
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-6">
            <form action="user/register" method="post" enctype="multipart/form-data">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username" name="username" placeholder="用户名">
                    <span style="color: red"  id="msg"></span>
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="密码">
                </div>
                <div class="form-group">
                    <label for="profile">头像</label>
                    <input type="file" id="profile" name="profile">
                </div>

<%--                <div class="form-group">--%>
<%--                    <label for="deptId">部门</label>--%>
<%--                    <select name="deptId" class="form-control">--%>
<%--                        <c:forEach items="${requestScope.depts}" var="dept">--%>
<%--                            <option id="deptId" value="${dept.id}">${dept.name}</option>--%>
<%--                        </c:forEach>--%>
<%--                    </select>--%>
<%--                </div>--%>

                <button type="submit" class="btn btn-default">注册</button>
            </form>
        </div>
        <div class="col-md-3"></div>
    </div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.js"></script>

<script src="static/js/axios.min.js"></script>
<script>
    //axios
    const instance = axios.create({
        headers: {"Content-Type":"application/x-www-form-urlencoded" }
    });

    let usernameInput = document.getElementById("username");
    usernameInput.addEventListener("blur",function (){
        instance.post('user/checkUserName',
            "username="+usernameInput.value,
        )
            .then(function (data) {

                if (data.data === 'yes') {
                    document.getElementById("msg").innerText = "用户名已经存在！"
                } else {
                    document.getElementById("msg").innerText = "用户名可以使用"
                }
            });

    })





//     let usernameInput = document.getElementById("username");
//     usernameInput.addEventListener("blur",function (){
//         ////ajax法一
//         // $.ajax("user/checkUserName",{
//         //     contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
//         //     data: {username:usernameInput.value},
//         //     type: "POST",
//         //     success: function (data, textStatus, jqXHR){
//         //         if (data === 'yes') {
//         //             document.getElementById("msg").innerText = "用户名已经存在！"
//         //         } else {
//         //             document.getElementById("msg").innerText = "用户名可以使用"
//         //         }
//         //     }
//         // });
//
// ////ajax法二
//         $.post("user/checkUserName",{username:usernameInput.value},
//             function (data){
//                 if (data === 's s s syes') {
//                     document.getElementById("msg").innerText = "用户名已经存在！"
//                 } else {
//                     document.getElementById("msg").innerText = "用户名可以使用"
//                 }
//
//         });
//
//
//     })











    // let usernameInput = document.getElementById("username");
    // document.getElementById("username").addEventListener("blur",function (){
    //     ajax("POST","user/checkUserName","username="+usernameInput.value,function (data){
    // if (data === 'yes') {
    //     document.getElementById("msg").innerText = "用户名已经存在！"
    // } else {
    //     document.getElementById("msg").innerText = "用户名可以使用"
    // }
    //     })
    // })

//     function ajax(method,url,data,func){
//         var xhr = new XMLHttpRequest()
// // => 0
// // 初始化 请求代理对象
//
//
//         xhr.open(method, url)
//         xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8")
//         console.log(xhr.readyState)
// // => 1
// // open 方法已经调用，建立一个与服务端特定端口的连接
//
//         xhr.send(data)
//
//         xhr.addEventListener('readystatechange', function () {
//             switch (this.readyState) {
//                 case 2:
//                     // => 2
//                     // 已经接受到了响应报文的响应头
//
//                     // 可以拿到头
//                     // console.log(this.getAllResponseHeaders())
//                     console.log(this.getResponseHeader('server'))
//                     // 但是还没有拿到体
//                     console.log(this.responseText)
//                     break
//
//                 case 3:
//                     // => 3
//                     // 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整
//
//                     // 在这里处理响应体不保险（不可靠）
//                     console.log(this.responseText)
//                     break
//
//                 case 4:
//                     // => 4
//                     // 一切 OK （整个响应报文已经完整下载下来了）
//
//                     // 这里处理响应体
//                     console.log(this.responseText)
//                     func(this.responseText)
//                     break
//             }
//         })
//     }




</script>
</body>
</html>
